<template>
	<view class="flex tab-wrap">
		<view @tap="tabClick(tab,idx)" v-for="tab,idx in tabs" :key="tab" :class="['tab', 'flex-1']">
			<bg-title :titleStyle="{'font-size':'30rpx'}" v-if="current==idx">{{tab}}</bg-title>
			<view v-else>{{tab}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"bg-tab",
		props:{
			tabs:{
				default:()=>([])
			},
			current:{
				default:0
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			tabClick(tab, idx){
				console.log(idx)
				this.$emit("tab-change", idx)
			}
		}
	}
</script>

<style lang="scss" scoped>
.tab-wrap {
	background-color: #FFFFFF;
	padding: 30rpx 0;
	.tab {
		position: relative;
		font-size: 14px;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 500;
		color: #4e5969;
		line-height: 15px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.tab-text {
		font-size: 14px;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 500;
		color: #4e5969;
	}
	.tab-text.active {
		font-size: 15px;
		color: #121212;
	}
	.tab-text.active::after {
		content:'';
		position: absolute;
		left:0;
		bottom:-12rpx;
		width: 30px;
		height: 10rpx;
		background: linear-gradient(90deg,#fa3131 3%, rgba(251,77,77,0.00) 95%);
		border-radius: 4px 1px 4px 1px;
	}
}

</style>